<template>
	<Layout icon="none" tabbar :innerBottom="false">
		<template #title>法务服务</template>

		<view class="inline-flex fill jcc service-tabs">
			<u-tabs style="width:calc(100% - 40rpx)" height="56" fontSize="28" bgColor="#F6F6F6" activeColor="#FF710A"
				:activeItemStyle="{fontSize:'32rpx'}" inactiveColor="#6E6E6E" barHeight="3" :list="tabs"
				:is-scroll="true" v-model="current"></u-tabs>
		</view>
		<view class="flex service-body">
			<!-- 文书模板、代写文书、法律咨询 -->
			<WritTemplate :parentId="current+1"></WritTemplate>
			<!-- <LegalCounsel v-else :parentId="current+1"></LegalCounsel> -->
		</view>
	</Layout>
</template>

<script lang="ts" setup>
	import Layout from '@/components/layout/layout.vue';
	import WritTemplate from './components/writ-template/writ-template.vue';
	import LegalCounsel from './components/legal-counsel/legal-counsel.vue';
	import { setTabbar } from '@/utils/wx';
	import { ref } from 'vue';
	import { onShow } from '@dcloudio/uni-app';
	import { isEmpty } from '@/utils/util';
	setTabbar({ selected: 1 });
	const current = ref(0);
	const tabs = ref([
		{ name: '文书模板' },
		{ name: '代写文书' },
		{ name: '法律咨询' },
		{ name: '法律顾问' },
		{ name: '诉讼服务' },
	]);
	onShow(() => {
		const serviceCurrent = uni.getStorageSync<string>('service_current');
		if (isEmpty(serviceCurrent)) return;
		current.value = parseInt(serviceCurrent, 10);
		uni.removeStorageSync('service_current')
	});
</script>

<style lang="scss">
	.service-tabs {
		height: 116rpx;
		padding: 30rpx 0;
		overflow: hidden;
	}

	.service-body {
		width: 750rpx;
		padding: 32rpx 0 0 0;
		border-radius: 36rpx 36rpx 0 0;
		background: #FFF;
		overflow: hidden;
	}
</style>